<template>
  <div class="map-container">
    <div class="top">
      <div class="title">本溪市太子河智慧水利系统</div>
      <div class="option">
        <div class="options">数字孪生底座</div>
        <div class="options">漫滩风险区域</div>
        <div class="options" 
        @click="showFlood"
        :class="[isActive1 ? 'active' : 'unactive']"
        >设计洪水推演
        </div>
        <div class="options">历史洪水模拟</div>
      </div>
      <div class="site-info">
        <div class="date">
          <p>{{ siteInfo.date }}</p>
        </div>
        <div class="tem">
          {{ weather.city  }} 
          {{ weather.tem  }} ℃ 
          {{ weather.wea  }}
          {{ weather.win }}
        </div>
      </div>
      <div>
        <img src="../../assets/images/top.png" alt="">
      </div>
    </div>
  </div>
</template>

<script>
import global from '@/views/Global.vue'
import dayjs from 'dayjs'; 
export default {
  data() {
    return {
      timer:null,
      siteInfo:{
        date:'',
        position:'',
        temperature:'',
        rainfall:'',
        weather:'',
        Wind:''
      },
      weather:{
        city:'',
        tem:0,
        wea:'',
        win:'',
      },

      // 控制点击变色
      isActive1:false,
    }
  },
  mounted() {
    this.getWeaAndTem()
    /* this.initMap() */
    this.timer=setInterval(()=>{
      this.getTime()
      global.nowTime = Date.parse(this.siteInfo.date);
    })
  },
  beforeDestroy(){
    clearInterval(this.timer)
  },
  methods: {
    // 获取时间
    getTime(){
      this.siteInfo.date=dayjs(Date.now()).format("YYYY-MM-DD HH:mm:ss")
    },
    /**
     * 展示淹没分析面板
     */
     showFlood(){
      this.$emit('showFlood')
      global.isActive1=!global.isActive1
     },
    // 获取天气
    getWeaAndTem() {
      this.$axios.get('https://yiketianqi.com/free/day', {
        params: {
          unescape: "1",
          appid: '21874569',
          appsecret: 'xcmyK7ms ',
          city:'沈阳'
        }
      }).then(res => {
        console.log(res.data);
        this.weather.city=res.data.city
        this.weather.tem=res.data.tem
        this.weather.wea=res.data.wea
        this.weather.win=res.data.win
      }).catch(err => {
        console.log(err)
      })
    },
  }
}
</script>

<style scoped>
.map-container{
  width: 100%;
  height: 100%;
  z-index: 999;
  position: absolute;
  top: 2vh;
}
.top{
  position: relative;
  height: 3.75rem;
  display: flex;
}
.title{
  padding-top: 1vh;
  color: #60cdad;
  font-size: 3.5vh;
  width: 30%;
  font-weight: bold;
  padding-right: 2.8125rem;
  line-height: 3.75rem;
  white-space: nowrap;
  /* margin-left: 10px; */
  margin-top: 5px;
  position: absolute;
  left: -1vw;
}
.option{
  margin-top: 2.5vh;
  width: 40%;
  padding-top: 2.5vh;
  display:flex;
  flex-direction:around;
  position: absolute;
  left: 30%;
}
.options{
  color: #fff;
  font-weight: bold;
  height: 3vh;
  width: 30vw;
  margin-right: 2vw;
  border: 1px solid #00ffbd;
  transform: skew(-20deg,0);
  text-align: center;
  line-height: 3vh;
  cursor: pointer;
  white-space: nowrap;
  z-index: 99;
}
.options:hover{
  background-color: #60cdad;
  color: #fff;
  z-index: 999;
}
.site-info{
  margin-top: 2vh;
  width: 30%;
  display: flex;
  font-size: 2vh;
  color: #60ccac;
  word-wrap: break-word;
  margin-left: 1.5vw;
  flex-wrap: nowrap;
  font-weight: 200;
  position: absolute;
  left: 69%;
  padding-left: 2vw;
}
.site-info p{
  white-space: nowrap;
  margin-right: 1vw;
}
img{
  position: absolute;
  /* top: -2px; */
  left: -1vw;
  width: 100%;
}
.title .options .site-info p{
  position: absolute;
  left: 0;
}
.active{
  background-color: #60cdad;
}
.tem{
  position: absolute;
  top: 1.8vh;
  left: 12vw;
}
</style>